<template>
  <div class="loginContent">
    <div class="loginForm">
      <el-card>
        <div class="account">
          <span>账户：</span>
          <common-input v-model="account"></common-input>
        </div>
        <div class="password">
          <span>密码：</span>
          <common-input type="password" v-model="password"></common-input>
        </div>

        <el-button class="login" @click="handleLogin">登录</el-button>
        <el-button class="register" @click="handleRegister">注册</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getLogin, getRegister } from "@/api/login";
import utils from "@/utils";
export default {
  data() {
    return {
      account: "",
      password: "",
    };
  },
  methods: {
    async handleLogin() {
      if (this.account == '') {
        this.$message.error('账号不能为空');
        return;
      } else if (this.password == '') {
        this.$message.error('密码不能为空');
        return;
      }
      const res = await getLogin({
        voucher: this.account,
        password: this.password,
      })
      const menu = res.data?.permissionList?.split(',')
      utils.setCache("menu", menu)
      if (res.code == 200) {
        this.$message.success('登录成功');
        utils.setCache("role", res.data.role)
        utils.setCache("token", res.data.token)
        this.$router.push(`/${menu[0]}`);
      } else {
        this.$message.error(res.message);
      }
    },
    async handleRegister() {
      if (this.account == '') {
        this.$message.error('账号不能为空');
        return;
      } else if (this.password == '') {
        this.$message.error('密码不能为空');
        return;
      }
      const res = await getRegister({
        account: this.account,
        password: this.password,
      })
      if (res.code == 200) {
        this.$message.success('注册成功');
      } else {
        this.$message.error(res.message);
      }
      this.account = ''
      this.password = ''

    },
  },
};
</script>

<style lang="less">
.loginContent {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/imgs/login_bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .loginForm {
    width: 500px;
    height: 400px;

    .el-card {
      width: 100%;
      height: 100%;

      .el-card__body {
        display: flex;
        flex-direction: column;

        .login {
          margin-top: 50px;
        }

        .el-input {
          width: 100%;
        }

        .register {
          margin-left: 0;
          margin-top: 20px;

        }
      }
    }
  }
}
</style>
